<template>    
          <div class="box">
            <div class="box-header">
              <div class="box-header12" style="size: 10px; font-weight: bold">基本信息</div>
              <div class="box-header1">
                <div class="box1">医院总称：北京癫痫病总院</div>
                <div class="box1">医院等级：二类甲等</div>
              </div>
              <div class="box-header1">
                <div class="box1">医院别称：癫痫总院</div>
                <div class="box1">医院性质：国营</div>
              </div>
              <div class="box-header1">
                <div class="box1">联系电话：010-897621181</div>
                <div class="box1">服务热线：010-887627181</div>
              </div>
              <div class="box-header1">
                <div class="box1">医院联系人：张全蛋</div>
                <div class="box1">联系人电话：158920192831</div>
              </div>
            </div>
            <div class="box-container" style="size: 10px; font-weight: bold">
              科室信息
              <div class="add"></div>
              </div>
            <el-table :data="list" style="width: 80%">
              <el-table-column prop="depName" label="部门科室" width="100">
                <template v-slot="{row}">
                    <span v-if="row.isEdit == false">{{ row.depName }}</span>
                    <el-input v-else v-model.number="row.depName"></el-input>
                </template>
              </el-table-column>
            <el-table-column prop="personCount" label="人数" width="80" >
          </el-table-column>
            <el-table-column prop="depSuperior" label="上级" width="150">
              <template v-slot="{row}">
                    <span v-if="row.isEdit == false">{{ row.depSuperior }}</span>
                    <el-input v-else v-model.number="row.depSuperior"></el-input>
                </template>
          </el-table-column>
            <el-table-column prop="depDirector" label="负责人" >
              <template v-slot="{row}">
                    <span v-if="row.isEdit == false">{{ row.depDirector }}</span>
                    <el-input v-else v-model.number="row.depDirector"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" >
              <template v-slot="{row}">
                    <span v-if="row.isEdit == false">{{ row.phone }}</span>
                    <el-input v-else v-model.number="row.phone"></el-input>
                </template>
          </el-table-column>
            <el-table-column prop="created" label="创建时间" >
              <template v-slot="{row}">
                    <span v-if="row.isEdit == false">{{ row.created }}</span>

                </template>
          </el-table-column>
      <el-table-column label="   操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="editHandler(row)">{{
            row.isEdit ? "保存" : "编辑"
          }}</el-button>
          <el-button type="success" @click="deleteHandler(row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <div></div>
    <br>

    <el-button type="success" @click="dialog = true">新增部门科室</el-button>
    <el-drawer
      v-model="dialog"
      title="新增科室"
      :before-close="handleClose"
      direction="ltr"
      class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form >
          <el-form-item label="上级" :label-width="formLabelWidth" prop="depSuperior">
            <el-input v-model="addDepInfo.depSuperior" autocomplete="off" />
          </el-form-item>
          <el-form-item label="科室名称" :label-width="formLabelWidth" prop="depName">
            <el-input v-model="addDepInfo.depName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="负责人" :label-width="formLabelWidth" prop="depDirector">
            <el-input v-model="addDepInfo.depDirector" autocomplete="off" />
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone"> 
            <el-input v-model="addDepInfo.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="人数" :label-width="formLabelWidth" prop="phone"> 
            <el-input v-model="addDepInfo.personCount" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">关闭</el-button>
          <el-button type="primary" :loading="loading" @click="onClick">
            {{ loading ? '确定 ...' : '确定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
          </div>
  </template>
  
  <script lang="ts" setup>
  import {reactive, ref,computed} from 'vue'
  import { ElDrawer, ElMessageBox } from 'element-plus'
import axios from 'axios';
import { depInfoApi,depInfoAddApi, depInfoUpdateApi } from '@/api/api';
  
const list =ref([]);
let searchParams = ref({
  id:0,
    depName:'',
    personCount:0,
    depSuperior:'',
    depDirector:'',
    phone:'',
    created:'',
});
let searchDepInfo = () =>{
  depInfoApi(searchParams.value)
  .then((res:any)=>{
      console.log("请求成功",res);
      console.log(res.data[0].created)
      list.value=res.data
      list.value.forEach((element: any) => {
        element.isEdit = false;
      });
      // total.value=res.total;
      // maxPage.value = res.maxPage;
      // current.value = res.current;
      console.log("list",list);
  }).catch((err)=>{
console.log(err.message)
  })
}

searchDepInfo();

let addDepInfo = reactive({
  depSuperior:'',
  depName:'',
  depDirector:'',
  phone:'',
  personCount:0
})


const onClick = () => {
  loading.value = true
  depInfoAddApi(addDepInfo)
  .then((res)=>{
    setTimeout(() => {
      loading.value = false
      dialog.value = false
    }, 400)
    console.log('新增成功',res);
    searchDepInfo();
  })
  .catch((err)=>{
    console.log(err.message);
  });
  }

let editHandler = (row:any)=>{
  console.log(row.id);
  if(row.isEdit){
    depInfoUpdateApi({
      id:row.id,
    depName:row.depName,
    depSuperior:row.depSuperior,
    depDirector:row.depDirector,
    phone:row.phone,
    }).then((res) => {
      console.log(res);
    });
  }
  row.isEdit = !row.isEdit;
}
// let deleteHandler = (row:any) =>{
//   depInfoDeleteApi({
//      id:row.id
//   }).then((res)=>{
//     console.log("删除成功",res);
//     searchDepInfo();
//   })
// }
let deleteHandler = (row:any) => {
  const url = `http://localhost:8080/depinfo/${row.id}`;
  axios.delete(url)
  .then(response =>{
    console.log("删除成功",response)
    searchDepInfo();
  })
}

  const formLabelWidth = '80px'
  let timer
  
  const table = ref(false)
  const dialog = ref(false)
  const loading = ref(false)

interface DepInfo{
    id:number;
    depName:String;
    personCount:number;
    depSuperior:String;
    depDirector:String;
    phone:String;
    created:String;
}
const selectedMenuItem = ref('depinfo');
const dialogVisible = ref(false);
const newDepInfo = ref<DepInfo>({
    id: 0,
    depName:'',
    personCount:0,
    depSuperior:'',
    depDirector:'',
    phone:'',
    created:''
  });
  const search = ref({ 
    depName:'',
    personCount:0,
    depSuperior:'',
    depDirector:'',
    phone:'',
    created:''
  })

  
  const handleClose = (done) => {
    if (loading.value) {
      return
    }
    ElMessageBox.confirm('Do you want to submit?')
      .then(() => {
        loading.value = true
        timer = setTimeout(() => {
          done()
          // 动画关闭需要一定的时间
          setTimeout(() => {
            loading.value = false
          }, 400)
        }, 2000)
      })
      .catch(() => {
        // catch error
      })
  }
  
  const cancelForm = () => {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
  }
  
  </script>
  
  <style scoped>
  .box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .box-header{
    width: 100%;
    border-bottom:1px solid #000
  }
  .box-header12{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .box-header1{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  .box1{
    width: 20%;
  }
  .box-container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px
  }
  .demo-drawer__footer{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .layout-container-demo {
    height: 100vh;
    display: flex;
    flex-direction: row;
  }
  
  .top-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 60px;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
    padding-right: 20px;
  }
  
  .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
  }
  
  .el-menu {
    border-right: none;
  }
  
  .el-main {
    padding: 0;
  }
  
  .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .search-export-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px;
  }
  
  .search-form {
    display: flex;
    align-items: center;
  }
  
  </style>
  